<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现案例</title>
	</head>
	<body>
		<div id="app">
			<div align="center">
				<h3 align="center">用户新增</h3><br>
				<p>
					用户名称: <input type="text" name="name" v-model="addUser.name"/>
					用户年龄: <input type="text" name="age"  v-model="addUser.age" />
					用户性别: <input type="text" name="sex"  v-model="addUser.sex" />
					<button @click="addUserBtn">新增</button>
				</p>
			</div>
			<hr />
			<div align="center">
				<h3 align="center">用户修改操作</h3><br>
				<p>
						用户ID号: <input type="text" name="id"   v-model="updateUser.id"  disabled/>
						用户名称: <input type="text" name="name" v-model="updateUser.name"/>
						用户年龄: <input type="text" name="age"  v-model="updateUser.age"/>
						用户性别: <input type="text" name="sex"  v-model="updateUser.sex"/>
						<button @click="updateUserBtn">修改</button>
				</p>
			</div>
			<h1 align="center">用户列表展现案例</h1>
			<table align="center" border="1px" width="80%">
				<tr align="center">
					<td>ID编号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<!-- 遍历tr标签 展现数据 -->
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button @click="updateClick(user)">修改</button>
						<button @click="deleteUserBtn(user.id)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			//指定公共的前缀
			axios.defaults.baseURL = "http://localhost:8090"
			const app = new Vue({
				el: "#app",
				data: {
					userList: [],
					//定义新增的user对象
					addUser: {
						id: null,
						name: '',
						age: '',
						sex: ''
					},
					updateUser: {
						id: '',
						name: '',
						age: '',
						sex: ''
					}
				},
				methods: {
					async findUserList(){
						let {data: result} = await axios.get("/axios/findUserList")
						//如果需要将ajax请求与vue JS进行关联,则必须实现数据传递
						this.userList = result
					},
					//实现用户数据的入库操作  this.addUser 传递封装的对象
					async addUserBtn(){
						let {data: result,status: status} 
								 = await axios.post("/axios/saveUser",this.addUser)
						if(status === 200){
							alert(result)
							//1.清空用户文本输入框
							this.addUser = {} 
							//2.刷新用户列表
							this.findUserList()
						}else{
							alert("用户新增失败!!!!")
						}
					},
					//用户修改事件
					updateClick(user){
						//将user对象传递给updateUser的属性
						this.updateUser = user
					},
					//定义修改操作的函数
					async updateUserBtn(){
						 let {data: result} 
						 =await axios.put("/axios/updateUser",this.updateUser);
						alert(result)
						//1.清空用户文本输入框
						this.updateUser = {} 
						//2.刷新用户列表
						this.findUserList()
						 
					},
					//定义删除操作的函数
					async deleteUserBtn(id){
						 let {data: result} 
						 =await axios.delete("/axios/deleteUserById?id="+id);
						alert(result)
						//2.刷新用户列表
						this.findUserList()
						 
					}
				},
				mounted(){
					//页面初始化完成之后调用
					this.findUserList()
				}
			})
		</script>
	</body>
</html>